

<!-- 添加银行卡 -->
<template>
	<view>
		<!-- 银行卡信息 -->
		<view class="oneRow bankInfo-Container">
			<view class="userPhoto-Container list-cell b-b radiusT10" @click="togglePopup('bottom', 'popup')">
				<text class="list-left">银行卡类型</text>
				<text class="list-right" style="width: 450rpx;">{{ cardType }}</text>
				<text class="cell-more yticon icon-you"></text>
			</view>
			<view class="userPhoto-Container list-cell b-b radiusT10" @click="selectBank">
				<text class="list-left">所属银行</text>
				<text class="list-right" style="width: 450rpx;">{{ bankName }}</text>
				<text class="cell-more yticon icon-you"></text>
			</view>
			<view class="list-cell b-b radiusB10">
				<text class="list-left">持卡人姓名</text>
				<input type="text" class="list-right" v-model="name" placeholder-class="inputHolder" placeholder="请输入持卡人姓名" />
			</view>
			<view class="list-cell b-b radiusB10">
				<text class="list-left">银行卡号</text>
				<input type="text" class="list-right" v-model="bankNum" placeholder-class="inputHolder" placeholder="请输入银行卡号" maxlength="19"/>
			</view>
			<view class="list-cell b-b radiusB10">
				<text class="list-left">身份证号</text>
				<input type="text" class="list-right" v-model="idCard" placeholder-class="inputHolder" placeholder="请输入持卡人身份证号" maxlength="18" />
			</view>
			<view class="list-cell radiusB10">
				<text class="list-left">预留手机号</text>
				<input type="text" class="list-right" v-model="phone" placeholder-class="inputHolder" placeholder="请输入银行预留手机号" maxlength="11" />
			</view>
		</view>

		<!-- 保存银行卡 -->
		<view class="saveBankCard-Container" @click="save">保存</view>
		<!-- 保存银行卡 -->
		<view class="delectBankCard-Container" v-if="id" @click="delect">删除</view>

		<!-- 银行卡类型 -->
		<uni-popup ref="showpopup" :type="type">
			<view class="popup-content">
				<view class="title_name">银行卡类型</view>
				<view class="title_name select" @click="close(1)">储蓄卡</view>
				<view class="title_name select" @click="close(2)" style="border: none;">信用卡</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import navHeader from '@/components/nav-header/nav-header';
import uniPopup from '@/components/uni-popup/uni-popup';

export default {
	components: {
		navHeader,
		uniPopup
	},
	data() {
		return {
			icon: {
				return: '/static/images/common/return-white.png',
				top: '/static/images/common/header.png',
				msgCenterWhite: '/static/images/common/msg-center-white.png'
			},
			bankName: '请选择所属银行',
			cardType: '储蓄卡',
			type: 'bottom',
			bankId: '',
			name:'',
			bankNum:'',
			idCard:'',
			phone:'',
			id:''
		};
		
	},
	onLoad(option){
		let that = this;
		if(option.type == 'change'){
			let data = JSON.parse(option.data);
			that.id = data.cbId;
			that.bankName = data.bankName;
			that.cardType = data.type=='0'?'储蓄卡':'信用卡';
			that.bankId = data.bankId;
			that.name = data.cardholder;
			that.bankNum = data.bankCardNumber;
			that.idCard = data.cardholderIdNo;
			that.phone = data.mobile;
			
			uni.setNavigationBarTitle({
				title:"修改银行卡"
			});
		}else {
			uni.setNavigationBarTitle({
				title:"添加银行卡"
			});
		}
	},
	onShow(){
		let that = this;
		uni.getStorage({
			key:"bankMsg",
			success(res) {
				that.bankName = res.data.name;
				that.bankId = res.data.bankId;
				uni.removeStorage({key:"bankMsg"});
			}
		})
	},
	methods: {
		// 选择银行卡
		selectBank() {
			uni.navigateTo({
				url: 'bankList'
			});
		},
		// 打开卡类型弹窗
		togglePopup(type, open) {
			this.type = type;
			this.$nextTick(() => {
				this.$refs['show' + open].open();
			});
		},
		// 选择卡类型,关闭弹窗
		close(type) {
			this.$refs['showpopup'].close();
			type == 1 ? (this.cardType = '储蓄卡') : (this.cardType = '信用卡');
		},
		// 保存
		save(){
			let that = this;
			console.log(this.bankName);
			if(this.bankName == '请选择所属银行'){
				this.$api.msg('请选择所属银行');
				return;
			}
			if(this.name == ''){
				this.$api.msg('请输入持卡人姓名');
				return;
			}
			if(this.bankNum == ''){
				this.$api.msg('请输入银行卡号');
				return;
			}else if(this.bankNum.length<16){
				this.$api.msg('请检查银行卡号格式');
				return;
			}
			if(this.idCard == ''){
				this.$api.msg('请输入身份证号');
				return;
			}else if(this.idCard.length!=18){
				this.$api.msg('请检查身份证号格式');
				return;
			}
			if(this.phone == ''){
				this.$api.msg('请输入预留手机号');
				return;
			}else if(this.phone.length!=11){
				this.$api.msg('请检查预留手机号格式');
				return; 
			}
			this.$api.globalUtil.requestAjax({
				url: that.id?'/bankApi/updateCustomerBankApi':'/bankApi/addCustomerBankApi',
				method: 'POST',
				data: {
					cbId:that.id?that.id:'',
					bankName:that.bankName,
					bankId:that.bankId,
					cardNumber:that.bankNum,
					type:that.cardType == "储蓄卡"?'0':'1',
					cardholder:that.name,
					cardholderIdNo:that.idCard,
					mobile:that.phone,
				},
				success: function(res) {
					that.list = res.data.response;
					
					that.$api.msg('添加银行卡成功!');
					setTimeout(function() {
						uni.navigateBack({
							delta:1
						});
					}, 2000);
				}
			});
			
		},
		// 删除银行卡
		delect() {
			
			var that = this;
			uni.showModal({
				content: '确认删除银行卡？',
				confirmText: '确认',
				cancelText: '取消',
				success(res) {
					if (res.confirm) {
						that.$api.globalUtil.requestAjax({
							url: '/bankApi/deleteCustomerBankApi',
							method: 'POST',
							data: {
								cbId:that.id
							},
							success: function(res) {
								uni.navigateBack({
									delta:1
								});
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}

// header部分
.header-Container {
	position: relative;
	width: 100%;
	height: 176rpx;
	overflow: hidden;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
	background: rgba(255, 255, 255, 1);

	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 1);
	}

	.leftBtns {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 86rpx;

		.back {
			margin-left: 17rpx;
			width: 44rpx;
			height: 44rpx;
		}
	}

	.title {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
}

// 银行卡信息
.bankInfo-Container {
	margin-top: 20rpx;
	width: 100%;
	height: 630rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 16rpx;
}
.container {
	.oneRow {
		margin-top: 20rpx;
		padding: 0 30rpx;
		border-radius: 10rpx;

		.radiusT10 {
			border-radius: 10rpx 10rpx 0 0;
		}
		.radiusB10 {
			border-radius: 0 0 10rpx 10rpx;
		}
	}
}
.list-cell {
	display: flex;
	align-items:center;
	padding: 0 30rpx 0 45rpx;
	height: 106rpx;
	line-height: 106rpx;
	position: relative;
	justify-content: center;

	input {
		color: #333333;
	}

	.inputHolder {
		font-size: 28rpx;
		font-family: PingFang;
		// font-weight:500;
		color: rgba(153, 153, 153, 1);
		line-height: 55px;
	}

	&.save-btn {
		margin: 0 auto;
		margin-top: 140rpx;
		width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: linear-gradient(90deg, rgba(224, 19, 38, 1) 0%, rgba(207, 0, 182, 1) 100%);
		border-radius: 45rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang;
		// font-weight:500;
		color: rgba(255, 255, 255, 1);
	}
	&.cell-hover {
		background: #fafafa;
	}
	&.b-b:after {
		left: 30rpx;
		right: 30rpx;
	}
	&.m-t {
		margin-top: 16upx;
	}
	.cell-more {
		align-self: baseline;
		font-size: $font-lg;
		color: $font-color-light;
		margin-left: 10upx;
	}
	.cell-tit {
		flex: 1;
		margin-right: 10upx;
		font-size: 26rpx;
		font-family: PingFang;
		color: #666666;
	}
	.cell-tip {
		font-size: 26rpx;
		font-family: PingFang;
		/* font-weight:500; */
		color: #333333;
		line-height: 55rpx;

		&.unBind {
			color: #d21728;
		}
		&.unSet {
			color: #999999;
		}
	}
	.list-left {
		width: 198rpx;
		font-size: 28rpx;
		color: #666666;
	}
	.list-right {
		width: 491rpx;
		font-size: 28rpx;
		color: #666666;
	}
}

// 保存银行卡
.saveBankCard-Container {
	margin: 0 auto;
	margin-top: 200rpx;
	width: 600rpx;
	height: 90rpx;
	line-height: 90rpx;
	// background: linear-gradient(90deg, rgba(224, 19, 38, 1) 0%, rgba(207, 0, 182, 1) 100%);
	background: #FE5E49;
	border-radius: 45rpx;
	text-align: center;
	font-size: 34rpx;
	font-family: PingFang;
	// font-weight:500;
	color: rgba(255, 255, 255, 1);
}
// 删除银行卡
.delectBankCard-Container {
	margin: 0 auto;
	margin-top: 56rpx;
	width: 598rpx;
	height: 88rpx;
	line-height: 90rpx;
	border-radius: 45rpx;
	text-align: center;
	font-size: 34rpx;
	font-family: PingFang;
	background: white;
	// font-weight:500;
	color: #FE5E49;
	border: 1rpx solid #FE5E49;
}
.popup-content {
	width: 100%;
	height: 356rpx;
	background-color: white;
	border-radius: 16rpx 16rpx 0 0;
	.title_name {
		width: 690rpx;
		height: 103rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666;
		font-size: 24rpx;
		margin: 0 auto 0 auto;
		border-bottom: 1rpx solid#EEEEEE;
	}
	.select {
		color: #333;
		font-size: 30rpx;
		height: 109rpx;
	}
}
</style>
